<template>
  <div class="cont">
    <!-- 新增大标题 -->
    <div class="cont_inner">
      <el-button type="primary" class="but" @click="handleAdd">新增标题</el-button>
      <!-- 点击新增标题 弹出框 -->
      <Pop />
    </div>
    <!-- 数据展示 -->
    <el-table :data="arr">
      <el-table-column label="编号" width="200" prop="id"></el-table-column>
      <el-table-column label="视频名称" width="200" prop="name"></el-table-column>
      <el-table-column label="创建日期" width="200" v-slot:default="{ row }">
        <span style="margin-left: 10px">
          {{ new Date(row.create_time).toLocaleString() }}
        </span>
      </el-table-column>
      <el-table-column label="更新日期" width="200" type="index" v-slot:default="{ row }">
        <span style="margin-left: 10px">
          {{ new Date(row.update_time).toLocaleString() }}
        </span>
      </el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="openDelectTitle(row)">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 点击编辑 弹出框 -->
    <PopPlus :name="id" />
    <!-- 分页 -->
    <el-pagination class="el_pagin" background layout="prev, pager, next" :total="pageInfo.pageTotal"
      :page-size="pageInfo.pageSize" @current-change="handleCurrentPage" @next-click="handleNext"
      @prev-click="handlePrev">
    </el-pagination>
  </div>
</template>

<script>
// 引入获取主课程接口
import getClassifyr from '@/api/getclassifyr'
// 引入删除主课程接口
import DelectClass from '@/api/DelectClassifry'
// 引入弹出框组件
import Pop from './components/Pop'
import PopPlus from './components/PopPlus'
// 引入Vuex state
import { mapState } from 'vuex'

export default {
  name: 'Classifyr',
  components: { Pop, PopPlus },
  data() {
    return {
      tableData: this.$store.state.pk,
      arr: [],
      pageInfo: {
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示数据
        pageTotal: 0 //总数
      },
      id: ''
    }
  },
  computed: {
    ...mapState(['pk'])
  },
  methods: {
    // 获取大标题信息
    async getTitleId() {
      // 在Vuex存储一份
      await this.$store.dispatch('saveVideoName')
      // 将后端返回标题数据 存储data中
      this.tableData = this.$store.state.pk
      // 将标题数据长度赋给 分页最长pageTotal
      this.pageInfo.pageTotal = this.$store.state.pk.length
      return this.tableData

      // 判断在当前页面刷新时，this.tableData == '' 则调获取章节信息接口 渲染数据
      // return new Promise((resolve) => {
      //   if (this.tableData == '') {
      //     getClassifyr.course(this.$store.state.token).then((res) => {
      //       if (res.data.status == 'success') {
      //         this.tableData = res.data.data
      //         resolve()
      //       }
      //     })
      //     // 如果有数据，则在Vuex中直接拿取 渲染数据
      //   } else {
      //     this.arr = this.tableData.slice((1 - 1) * this.pageInfo.pageSize,1 * this.pageInfo.pageSize)
      //   }
      // })
    },
    // 当前页数   value 当前页数
    handleCurrentPage(value = 1) {
      this.arr = this.tableData.slice(
        (value - 1) * this.pageInfo.pageSize,
        value * this.pageInfo.pageSize
      )
    },
    // 分页 ==> 下一页
    handleNext(value) {
      this.arr = this.tableData.slice(
        (value - 1) * this.pageInfo.pageSize,
        value * this.pageInfo.pageSize
      )
    },
    // 分页 ==> 上一页
    handlePrev(value) {
      this.arr = this.tableData.slice(
        (value - 1) * this.pageInfo.pageSize,
        value * this.pageInfo.pageSize
      )
    },
    // 编辑
    handleEdit(row) {
      this.id = row.id // 当前点击的id
      // 点击编辑 弹出框
      this.$store.commit('addVisible')
    },
    // 删除
    openDelectTitle(row) {
      //管理员id  ==> row.id
      // 删除弹出提示框
      this.$confirm('此操作将永久删除该主课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          // 调用删除标题接口
          DelectClass.DelectClassifry(this.$store.state.token, row.id).then(
            (res) => {
              console.log(res)
              if (res.data.status == 'success') {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
                location.reload()
              } else {
                this.$message.error(res.data.msg)
              }
            }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 表单 提交事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.id)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击新增标题 弹出 弹出框
    handleAdd() {
      // 点击编辑按钮,让Pop弹出框组件显示
      this.$store.commit('isdialogVisible')
    }
  },
  // 首次挂载后,渲染大标题数据
  async mounted() {
    let res = await this.getTitleId()
    this.pageInfo.pageTotal = this.tableData.length
    this.arr = this.tableData.slice((1 - 1) * this.pageInfo.pageSize, 1 * this.pageInfo.pageSize)
  }
}
</script>

<style>
.el_pagin {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.cont_inner {
  height: 60px;
  background-color: white;
  margin: 20px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cont_inner>.but {
  width: 160px;
  height: 50px;
  margin-right: 10px;
}
</style>
